<template>
    <div class="k-select-user">
        <label v-show="!info.id">
            {{ loading ? '...' : '待选择' }}
        </label>
        <label v-if="info.id">
            {{ info.nickname }}
        </label>
        <a href="javascript:;"
           class="select-link"
           @click="show = true">选择用户</a>

        <!-- 弹窗 -->
        <el-dialog :visible.sync="show" title="选择用户" :close-on-click-modal="false">
            <form @submit.prevent="onClickSearch">
                <div class="form-input">
                    <el-input v-model="search"
                              ref="search"
                              autocomplete="on"
                              placeholder="输入UID、昵称、手机号、邮箱地址搜索"
                              size="small"/>
                </div>
                <div class="form-button">
                    <el-button type="info"
                               icon="el-icon-search"
                               native-type="submit"
                               size="small">搜索</el-button>
                </div>
            </form>

            <el-table size="small" :data="users" v-loading="listLoading">
                <el-table-column prop="id" label="UID" width="80px"/>

                <el-table-column label="会员">
                    <template v-slot="{ row }">
                        <div class="k-select-user-name">
                            <div class="img">
                                <k-avatar :src="row.avatar"/>
                            </div>
                            <div class="text">{{ row.nickname }}</div>
                        </div>
                    </template>
                </el-table-column>

                <el-table-column label="邮箱" prop="email"></el-table-column>

                <el-table-column label="注册时间" prop="create_time"></el-table-column>

                <el-table-column label="选择" width="120px" align="center">
                    <template v-slot="{ row }">
                        <el-button size="small" @click="onClickSelect(row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination :current-page="page"
                           :total="total"
                           @current-change="onCurrentChange"/>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { getUser, getUserList } from '@/services/users.service';
import { UserModel } from '@/models/user.model';
import KAvatar from '@/components/avatar.vue';

@Component({
    name: 'KSelectUser',
    components: { KAvatar }
})
export default class KSelectUser extends Vue {
    @Prop({ type: Number }) readonly value!: number;
    show: boolean = false;
    search: string = '';
    users: UserModel[] = [];
    total: number = 0;
    info = {} as UserModel;
    loading: boolean = false;
    listLoading: boolean = false;
    limit: number = 10;
    page: number = 1;

    mounted() {
        if (this.value) {
            this.getInfo();
        }
    }

    @Watch('show')
    onShowChange(val: boolean) {
        if (!val) {
            this.search = '';
            this.page = 1;
            this.total = 0;
            this.users = [];
        } else {
            this.$nextTick(() => {
                (this.$refs.search as any).focus();
            });
        }
    }

    @Watch('value')
    onValueChange(val: number, old: number) {
        if (!val) {
            this.info = {} as any;
        }
        if (val && !old) {
            this.getInfo();
        }
    }

    // 获取用户信息
    getInfo() {
        this.loading = true;
        getUser(this.value)
            .finally(() => this.loading = false)
            .then(result => {
                this.info = result.data;
            })
            .catch(err => {
                this.$message.error(err.response.message);
            })

    }

    // 搜索
    onClickSearch() {
        if (this.search) {
            this.listLoading = true;
            getUserList({
                key: this.search,
                limit: this.limit,
                page: this.page,
            })
                .finally(() => this.listLoading = false)
                .then(result => {
                    this.users = result.data.items;
                    this.total = result.data.total;
                })
        }
    }

    // 选择
    onClickSelect(data: UserModel) {
        this.info = data;
        this.$emit('input', data.id);
        this.show = false;
    }

    // 页码更新
    onCurrentChange(page: number) {
        this.page = page;
        this.onClickSearch();
    }
}
</script>

<style scoped lang="scss">
.k-select-user {
    form {
        display: flex;
        .form-input {
            flex: 1;
        }
        .form-button {
            padding-left: 20px;
            /deep/ button {
                width: 100%;
            }
        }
    }
    label {
        color: #999;
    }
    .select-link {
        color: #1890ff;
        margin-left: 20px;
    }
    &-name {
        display: flex;
        align-items: center;
        .text {
            margin-left: 5px;
        }
    }
}
</style>
